import { Share2, Users } from "lucide-react"
import { UserCard } from "@/components/user-card"
import { EmptyState } from "./empty-state"
import { UserCardSkeleton } from "../skeletons/user-card-skeleton"
import { Button } from "@/components/ui/button"
import type { UserFollower } from "@/types/user"

interface FollowersTabProps {
  followers: UserFollower[]
  isLoading?: boolean
}

export function FollowersTab({ followers, isLoading = false }: FollowersTabProps) {
  return (
      <div>
        {isLoading ? (
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
              {Array(12)
                  .fill(0)
                  .map((_, i) => (
                      <UserCardSkeleton key={i} />
                  ))}
            </div>
        ) : followers.length > 0 ? (
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
              {followers.map((user) => (
                  <UserCard key={user.id} user={user} />
              ))}
            </div>
        ) : (
            <EmptyState
                icon={<Users className="h-16 w-16 text-muted-foreground" />}
                title="暂无粉丝"
                description="分享你的音乐品味和创建精彩的歌单，吸引更多粉丝关注你"
                action={
                  <Button className="mt-4" size="sm">
                    <Share2 className="mr-2 h-4 w-4" />
                    分享我的主页
                  </Button>
                }
            />
        )}
      </div>
  )
}

